<template>
  <div class="loading-page">
    <div class="container">
      <img @load="loadedCnt++" src="@/assets/images/loading-clipper.png" alt="" class="clipper"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-1.png" alt="" class="ellipsis dot-1 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-2.png" alt="" class="ellipsis dot-2 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-3.png" alt="" class="ellipsis dot-3 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-4.png" alt="" class="ellipsis dot-4 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-5.png" alt="" class="ellipsis dot-5 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-dot-6.png" alt="" class="ellipsis dot-6 scale-animate"/>
      <img @load="loadedCnt++" src="@/assets/images/loading-flag.png" alt="" class="flag"/>

      <!--用来预加载图片-->
      <img v-if="loadedCnt >= 7" @load="loadedCnt++" class="hidden-img" src="@/assets/images/confirm-bg.png" alt=""/>
      <img v-if="loadedCnt >= 7" @load="loadedCnt++" class="hidden-img" src="@/assets/images/confirm-choose-border.png" alt=""/>
      <img v-if="loadedCnt >= 7" @load="loadedCnt++" class="hidden-img" src="@/assets/images/confirm-submit-btn.png" alt=""/>
      <img v-if="loadedCnt >= 7" @load="loadedCnt++" class="hidden-img" src="@/assets/images/confirm-left-btn.png" alt=""/>
      <img v-if="loadedCnt >= 7" @load="loadedCnt++" class="hidden-img" src="@/assets/images/confirm-right-btn.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/1.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/2.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/3.png" alt=""/>
      <img v-if="loadedCnt >= 13" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/4.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/5.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/6.png" alt=""/>
      <img v-if="loadedCnt >= 12" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/7.png" alt=""/>
      <img v-if="loadedCnt >= 13" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/8.png" alt=""/>
      <img v-if="loadedCnt >= 13" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/9.png" alt=""/>
      <img v-if="loadedCnt >= 13" @load="loadedCnt++" class="hidden-img" src="@/assets/images/faces/10.png" alt=""/>
    </div>
  </div>
</template>

<script>
import {hairList} from '@/config/index'
import {mapGetters, mapActions} from 'vuex'
import eventBus from '@/store/eventBus'
export default {
  name: 'loadingPage',
  data: () => ({
    loadedCnt: 0
  }),
  computed: {
    ...mapGetters([
      'resultLen', 'gender', 'faceId', 'correctFace'
    ])
  },
  created () {
    if (!this.correctFace) {
      // 如果接口检测到人脸不正确，会返回错误，就进入错误页
      this.$router.push({
        name: 'errors',
        query: {
          from: 'upload',
          error: 'face-error'
        }
      })
      return
    }
    eventBus.$on('firstPhotoReady', () => {
      // 当第一张合成图准备完成，则跳转到确认页
      this.$router.replace({
        name: 'confirm',
        query: {
          'id': hairList[this.gender][0].id
        }
      })
    })
    if (this.faceId) {
      // 如果加载到本页时faceId已经获取完成，就进入请求，否则等watch到再请求
      this.getMergedFace(hairList[this.gender][0].id)
    }
  },
  methods: {
    ...mapActions([
      'getMergedFace'
    ])
  },
  watch: {
    faceId () {
      this.getMergedFace(hairList[this.gender][0].id)
    },
    correctFace (val) {
      // 如果接口检测到人脸不正确，会返回错误，就进入错误页
      if (!val) {
        this.$router.replace({
          name: 'errors',
          query: {
            from: 'upload',
            error: 'face-error'
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .loading-page {
    position: relative;
    background: {
      image: url(~@/assets/images/loading-bg.png);
      size: cover;
      position: center;
    }
    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 560px;
      height: 380px;
    }
    .clipper {
      position: absolute;
      width: 241px;
      height: 213px;
      left: 0;
      top: 0;
    }
    .ellipsis {
      position: absolute;
      width: 33px;
      height: 33px;
    }
    .dot-1 {
      top: 135px;
      left: 206px;
      animation: scale1 2s infinite;
    }
    .dot-2 {
      top: 134px;
      left: 262px;
      animation: scale2 2s infinite;
    }
    .dot-3 {
      top: 136px;
      left: 312px;
      animation: scale3 2s infinite;
    }
    .dot-4 {
      top: 134px;
      left: 380px;
      animation: scale4 2s infinite;
    }
    .dot-5 {
      top: 136px;
      left: 436px;
      animation: scale5 2s infinite;
    }
    .dot-6 {
      top: 135px;
      left: 482px;
      animation: scale6 2s infinite;
    }
    .flag {
      position: absolute;
      width: 544px;
      height: 130px;
      left: 20px;
      bottom: 0px;
    }
    @keyframes scale1 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      10% {
        transform: scale(1);
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
    @keyframes scale2 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      10% {
        transform: scale(0);
      }
      20% {
        transform: scale(1)
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
    @keyframes scale3 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      20% {
        transform: scale(0);
      }
      30% {
        transform: scale(1);
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
    @keyframes scale4 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      30% {
        transform: scale(0);
      }
      40% {
        transform: scale(1);
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
    @keyframes scale5 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      40% {
        transform: scale(0);
      }
      50% {
        transform: scale(1);
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
    @keyframes scale6 {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      50% {
        transform: scale(0);
      }
      60% {
        transform: scale(1);
      }
      90% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(.5);
        opacity: 0;
      }
    }
  }
</style>
